/*
 * @Author: zhangyujie
 * @Date:   2015-08-12 10:44:27
 * @Last Modified by:   zhangyujie
 * @Last Modified time: 2015-08-14 13:53:11
 */


define(['jquery', 'd3', 'util'], function($, d3, util) {
    function productRing(selector,data,myurl) {
        var myurl=myurl;
        function circleClick(that) {
            //回调函数
            var $this=$(that);

            var date=$this.attr("date");
            var pid=$this.attr("pid");
            var pname=$this.attr("pname");
            $(".circle-content").hide();
            $(".user-buy-list").show();
            $(".p-name").text("");
            $(".detail-customer-list").empty();
            $(".scale-amount").text("0");
            $(".sell-time-span").text("0");
            $(".renshu").text("0");

            $.ajax({
                url:myurl,
                async:false,
                data:{
                    date:date,
                    pId:pid
                },
                success: function(data){

                    if(data.status==1){
                        var total=0;
                        data.data.forEach(function(d){
                            total+= d.asrSellAmount;
                        });
                        data.data.forEach(function(d){
                            var s='<div class="row show-grid scale-data user-buy-list-data">'+
                                '<div class="col-xs-3">'+d.userNickName+'</div>'+
                                '<div class="col-xs-3">'+d.asrSellAmount/10000+'万</div>'+
                                '<div class="col-xs-3">'+(d.asrSellAmount/total).toFixed(2)*100+'%</div>'+
                                '<div class="col-xs-3 deal-time">'+(d.orderConfirmTime).substr(0,10)+'</div>'+
                                '</div>';
                                $(".detail-customer-list").append(s);
                        })

                        $(".p-name").text(pname);



                        $(".scale-amount").text(total/10000);
                        $(".sell-time-span").text();
                        $(".renshu").text(data.data.length);
                    }

                }
            });

            $(".goback").click(function(){
                $(".circle-content").show();
                $(".user-buy-list").hide();
            })


        }
        //数据
        var setting = {
                selector: selector,
                series:data,
            //    [{
            //    'name': '产品XXAXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
            //    'value': 70
            //}, {
            //    'name': '产品XXBXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
            //    'value': 50
            //}, {
            //    'name': '产品XXXXXXXXXXXXXXXXXXXXXXXXXXXXC',
            //    'value': 30
            //}, {
            //    'name': '产品XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXD',
            //    'value': 20
            //}, ],
            colorset: ['#E9B8FD', '#FDAC95', '#95F3BC', '#8CE9FD'],
            margin: {
            top: 10,
                right: 20,
                left: 10,
                bottom: 10
        },
        nameStyle: {
            fontSize: '12px',
                fontWeight: '600',
                color: '#818181'
        },
        valueStyle: {
            fontSize: '20px',
                fontWeight: '600',
                color: '#818181'
        },
        // 圆环出的斜线
        diffDistance: {
            length: 30,
                stroke: '',
                strokeWidth: '1'
        },
        // 细横线
        lightLine: {
            length: 40,
                strokeWidth: '1'
        },
        // 粗横线
        boldLine: {
            length: 45,
                strokeWidth: '2'
        }
    }

    pRing(setting)

    function pRing(setting) {
        var selector = setting.selector,
            series = setting.series,
            colorset = setting.colorset,
            margin = setting.margin,
            nameStyle = setting.nameStyle,
            valueStyle = setting.valueStyle,
            width = document.querySelector(selector).offsetWidth,
            height = document.querySelector(selector).offsetHeight,
            radius = Math.min(width, height) / 5.5,
            innerRadius = 0.4 * radius,
            startAngle = 0,
            endAngle = 2 * Math.PI,
            arcArray = [],
            lineArray = [],
            lineArrayLight = [],
            lineArrayBold = [],
            sum = 0,
            diffDistance = setting.diffDistance.length,
            lightLine = setting.lightLine.length,
            boldLine = setting.boldLine.length

        for (var i = 0; i < series.length; i++) {

            sum += series[i].value
        }

        var svg = d3.select(selector)
            .append('svg')
            .attr('width', width)
            .attr('height', height)

        var pie = d3.layout.pie()
            .sort(null)
            .startAngle(startAngle)
            .endAngle(endAngle)
            .value(function(d) {

                return parseFloat(d.value)
            })

        var con = svg.append('g')
            .attr('transform', 'translate(' + (width / 2-20) + ',' + (height /3 + 10)+ ')')

        var textName = svg.append('g')
            .attr('transform', 'translate(' + width / 15+ ',' + (height* 2/3 + 10) + ')')


        var line = con.append('g'),
            lineLight = con.append('g'),
            lineBold = con.append('g'),
            textValue = con.append('g')


        var arc = d3.svg.arc()
            .innerRadius(innerRadius)
            .outerRadius(function(d) {

                var value = parseFloat(d.data.value)
                d.r = (radius) * (value / 60.0) + innerRadius

                arcArray.push(d)

                return (radius) * (value / 60.0) + innerRadius
            })



        var path = con.selectAll('.solidArc')
            .data(pie(series))
            .enter().append('path')
            .attr('fill', function(d, i) {
                return colorset[i]
            })
            .attr('class', 'solidArc')
            .attr('d', arc)
            .attr('pid', function(d, i) {
                return d.data.pId;
            })
            .attr('pname', function(d, i) {
                return d.data.name;
            })
            .attr('date', function(d, i) {
                return d.data.date;
            })
            .on("click", function() {
                circleClick(this)
            })

        // 添加辅助线
        for (var i = 0, len = arcArray.length; i < len; i++) {

            var x, y, diffAngle, x1, y1, x2, x3

            diffDistance = diffDistance

            diffAngle = (arcArray[i].startAngle + arcArray[i].endAngle) / 2

            x = Math.cos(diffAngle - Math.PI / 2) * (arcArray[i].r)

            y = Math.sin(diffAngle - Math.PI / 2) * (arcArray[i].r)

            x1 = Math.cos(diffAngle - Math.PI / 2) * (arcArray[i].r + diffDistance)

            y1 = Math.sin(diffAngle - Math.PI / 2) * (arcArray[i].r + diffDistance)

            if (x1 > 0) {

                x2 = x1 + lightLine
                x3 = x2 + boldLine
            } else {

                x2 = x1 - lightLine
                x3 = x2 - boldLine
            }

            var temp = {
                x: x,
                y: y,
                x1: x1,
                y1: y1,
                color: colorset[i]
            }

            var parm = {
                x: x1,
                y: y1,
                x1: x2,
                y1: y1,
                color: colorset[i],
                name: arcArray[i].data.name,
                value: ((arcArray[i].data.value * 100 / sum).toFixed(0))

            }

            var parm1 = {
                x: x2,
                y: y1,
                x1: x3,
                y1: y1,
                color: colorset[i],
                name: arcArray[i].data.name,
                value: ((arcArray[i].data.value * 100 / sum).toFixed(0))
            }

            lineArray.push(temp)

            lineArrayLight.push(parm)

            lineArrayBold.push(parm1)
        }

        con.selectAll('.line')
            .data(lineArray)
            .enter()
            .append('line')
            .attr('class', 'line')
            .attr('x1', function(d, i) {

                return d.x
            })
            .attr('y1', function(d, i) {

                return d.y
            })
            .attr('x2', function(d, i) {

                return d.x1
            })
            .attr('y2', function(d, i) {

                return d.y1
            })
            .attr('stroke', function(d, i) {

                return d.color
            })
            .style('stroke-width', '1')

        lineLight.selectAll('.lightLine')
            .data(lineArrayLight)
            .enter()
            .append('line')
            .attr('class', 'lightLine')
            .attr('x1', function(d, i) {

                return d.x
            })
            .attr('y1', function(d, i) {

                return d.y
            })
            .attr('x2', function(d, i) {

                return d.x1
            })
            .attr('y2', function(d, i) {

                return d.y1
            })
            .attr('stroke', function(d, i) {

                return d.color
            })
            .attr('stroke-width', setting.lightLine.strokeWidth)

        // lineBold.selectAll('.boldLine')
        //     .data(lineArrayBold)
        //     .enter()
        //     .append('line')
        //     .attr('class', 'boldLine')
        //     .attr('x1', function(d, i) {

        //         return d.x
        //     })
        //     .attr('y1', function(d, i) {

        //         return d.y
        //     })
        //     .attr('x2', function(d, i) {

        //         return d.x1
        //     })
        //     .attr('y2', function(d, i) {

        //         return d.y1
        //     })
        //     .attr('stroke', function(d, i) {

        //         return d.color
        //     })
        //     .attr('stroke-width', setting.boldLine.strokeWidth)

        var po = 33,co = 30
        textName.selectAll('.textName')
            .data(lineArrayBold)
            .enter()
            .append('text')
            .attr('class', 'textName')
            .attr('x', function(d, i) {

                return  10
            })
            .attr('y', function(d, i) {

                return  po + 15 * i
            })
            .attr('fill', function(d, i) {

                // if (d.x < 0) {

                return nameStyle.color
                // } else {

                //     return d.color
                // }
            })
            .text(function(d, i) {
                return d.name
            })
            .style('font-size', function(d, i) {
                return nameStyle.fontSize
            })
            .style('font-weight', valueStyle.fontWeight)

        textName.selectAll('circle')
            .data(lineArrayBold)
            .enter()
            .append('circle')
            .attr('r', 5)
            .attr('cx', function(d, i) {
                return 0
            })
            .attr('cy', function(d, i) {
                return co + 15 * i
            })
            .attr('fill', function(d, i) {
                return colorset[i]
            })

        textValue.selectAll('.textValue')
            .data(lineArrayLight)
            .enter()
            .append('text')
            .attr('class', 'textValue')
            .attr('x', function(d, i) {

                if (d.x > 0) {

                    return d.x
                } else {

                    return d.x1
                }
            })
            .attr('y', function(d, i) {

                return d.y
            })
            .attr('fill', function(d, i) {

                if (d.x > 0) {

                    return valueStyle.color
                } else {

                    return d.color
                }
            })
            .attr('dx', '0.35em')
            .attr('dy', '-0.15em')
            .text(function(d, i) {



                return d.value + '%'


            })
            .style('font-size', function(d, i) {



                return valueStyle.fontSize


            })
            .style('font-weight', valueStyle.fontWeight)
            .on("click", function() {
                circleClick(this)
            })


    }
}
return {
    productRing: productRing
}


})
